<!--
 * @Description: 考试练习列表 -- exam_practice
 * @Author: your name
 * @Date: 2023-12-08
 * @LastEditTime: 2023-12-08
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="exam_practice heart_t">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="item.title"
          :name="String(index)"
          v-for="(item, index) in questionBank"
          :key="item.cate_id"
        ></el-tab-pane>

        <!-- 内容区域 -->
        <div
          class="recommend recommend-body heart_w"
          v-show="activeName == String(i)"
          v-for="(item_t, i) in questionBank"
          :key="item_t.title"
        >
          <el-row>
            <el-col :span="6" v-for="(ite, index) in item_t.list" :key="index">
              <a :href="`#/exam_practice/FRM/frmQuestionbank?cid=${ite.id}`">
                <el-image
                  src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/dbb3a202103301518057631.jpg"
                >
                </el-image>
                <div>
                  <div class="title">{{ ite.title }}</div>
                </div>
                <div class="group">
                  <div>
                    <!-- <div class="people">776人已答题</div> -->
                  </div>
                  <div
                    class="button"
                    :style="{
                      color: `${ite.color}`,
                      background: `${item_t.color}`
                    }"
                  >
                    <i class="el-icon-edit"></i>
                    答题
                  </div>
                </div>
              </a>
            </el-col>
          </el-row>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getTikuList } from '@/api/course.js'
export default {
  name: 'exam_practice',
  data() {
    return {
      activeName: '0',
      questionBank: []
    }
  },
  created() {
    this.tikList()
  },
  methods: {
    tikList() {
      getTikuList({ mark: 'h5-tiku' }).then(({ data: data }) => {
        this.questionBank = data.data
      })
    },
    handleClick(tab, event) {
      console.log(tab.index, event)
    },
    examList(id, index) {
      // console.log(index, this.activeName)
      if (this.activeName == index) {
        this.$router.push({
          path: '/exam_practice/FRM/frmQuestionbank',
          query: { cid: id }
        })
      }

      // this.$router.push({
      //   path: '/exam_practice/CFA/questionbank',
      //   query: { cid: 9224 }
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.heart_t {
  width: 1250px;
  margin: 0 auto;
}
.exam_practice {
  background-color: #fff;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 30px;
  min-height: 460px;

  ::v-deep .el-tabs__active-bar {
    height: 3px;
    background-color: #2c8eff;
  }

  .el-tabs__item.is-active {
    color: #409eff !important;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e1e1e1;
  }

  ::v-deep .el-tabs__header {
    margin: 0;
    background-color: #fff;
    border-radius: 8px;
  }

  ::v-deep .el-tabs__nav-wrap {
    padding: 0 30px;
  }

  ::v-deep .el-tabs__item {
    height: 62px;
    overflow: hidden;
    font-size: 16px;
    line-height: 68px;
    text-align: center;
    color: #666;
    user-select: none;
  }

  ::v-deep .el-tabs__content {
    padding: 25px;
    background-color: #fff;
  }
}

.on {
  color: #2c8eff;
}
.autoHeight {
  height: auto !important;
}

.container {
  padding: 10px 20px 0 17px;
  border-radius: 4px;
  background-color: #ffffff;
  // background-color: #f6f7fb;
  .course_item:last-child {
    .content_list:last-child {
      border-bottom: none;
    }
  }
}
.course_item {
  display: flex;
  align-items: center;

  .course_title {
    font-size: 16px;
    line-height: 60px;
    color: #969696;

    span {
      color: #010101;
      font-weight: bold;
    }
  }
}

.content_list {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 15px 103px 0 33px;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px dashed #efefef;

  div {
    height: 30px;
    margin-right: 30px;
    margin-bottom: 15px;
    line-height: 30px;
    font-size: 14px;
    color: #282828;
    span {
      cursor: pointer;
      user-select: none;
    }
  }
}

/* 考试列表 */
.recommend-body {
  .el-row a:hover {
    box-shadow: 0 2px 15px rgb(79 109 143 / 20%) !important;
  }
  .group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 14px 20px 28px;

    .people {
      margin-top: 8px;
      font-size: 14px;
      color: #999999;
    }

    .button {
      height: 34px;
      padding: 0 19px;
      border-radius: 17px;
      // background-color: #2c8eff;
      // color: #ffffff;
      background: rgb(229, 254, 249);
      color: rgb(9, 199, 161);
      font-size: 16px;
      line-height: 34px;
    }
  }

  .money {
    font-size: 14px;
    color: #ff6b00;

    span {
      font-size: 22px;
    }
  }
}

.recommend {
  padding-bottom: 30px;
  .el-col {
    margin-bottom: 14px;
    padding: 0 7px;
  }

  .el-row {
    margin-top: 30px;
    a {
      display: block;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      transition: 0.3s;
      box-shadow: 0 2px 15px rgb(79 109 143 / 20%);

      .el-image {
        display: block;
        width: 100%;
        height: 160px;
      }

      .el-image + div {
        padding: 0 15px;
      }
    }
  }

  .el-row a:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 16px rgb(79 109 143 / 12%);
  }

  .title {
    padding-top: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
  }
}

/* 练习列表 */

.recommend-head {
  margin-top: 50px;
}

.recommend-main {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 30px -24px -24px 0;
  .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 3px 20px rgb(0 0 0 / 7%);
  }

  .item {
    display: block;
    width: 384px;
    padding: 20px 20px 17px;
    border-radius: 8px;
    margin: 0 24px 24px 0;
    box-sizing: border-box;
    background-color: #ffffff;
    // background-color: #f6f7fb;
    box-shadow: 0 3px 20px rgb(0 0 0 / 7%);
    transition: 0.3s;

    .title {
      font-size: 18px;
      line-height: 24px;
      color: #282828;
      padding-top: 0;
    }
  }
  .group {
    display: flex;
    align-items: center;
    margin-top: 38px;

    .total {
      font-size: 16px;
      color: #ff6b00;
    }

    .people {
      flex: 1;
      margin-left: 20px;
      font-size: 14px;
      color: #999999;
    }

    .button {
      height: 30px;
      padding: 0 17px;
      border-radius: 15px;
      color: #ffffff;
      background-color: #2c8eff;
      font-size: 14px;
      line-height: 30px;
    }
  }
}
</style>
